<template>
    <div style="border-color: #f2f2f6;">
        <el-date-picker v-model="value3" type="datetimerange" start-placeholder="入住时间" end-placeholder="离店时间"
            format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
        <el-select v-model="formInline.region" placeholder="全部房型" clearable style="width: 100px;">
            <el-option label="双床房" value="shanghai" />
            <el-option label="大床房" value="beijing" />
        </el-select>
        <el-select v-model="formInline.user" placeholder="全部状态" clearable style="width: 100px;">
            <el-option label="待确认" value="shanghai" />
            <el-option label="已完成" value="beijing" />
            <el-option label="已关闭" value="beiing" />
        </el-select>
        <el-input v-model="formInline.bookName" style="max-width: 300px" placeholder="客户姓名" class="input-with-select">
            <template #append>
                <el-button @click="RoomCodeGetlist()" :icon="Search" />
            </template>
        </el-input>
    </div>

    <el-table :data="tableData" style="width: 100%; margin-top: 30px;">
        <el-table-column prop="id" label="订单编号" width="100" />
        <el-table-column prop="roomCode" label="房型（房号）" width="100" />
        <el-table-column prop="bookName" label="房客姓名" width="100" />
        <el-table-column prop="bookPhone" label="手机号码" width="120" />
        <el-table-column prop="rzTime" label="入住时间" width="130" :formatter="formatDate" />
        <el-table-column prop="ldTime" label="离店时间" width="130" :formatter="formatDate" />
        <el-table-column prop="money" label="实付金额" width="120" />

        <el-table-column prop="scrice" label="状态" width="130" />
        <el-table-column label="操作" width="250">
            <template #default="{ row }">
                <el-button type="text" @click="handleEdit(row)">编辑</el-button>
                <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


    <div>
        <el-dialog v-model="AddorderTypeDialog" center top="5vh" width="35%" height="100%" draggable>
            <span>
                <h3>添加订单</h3>
            </span>
            <template #footer>
                <div class="dialog-footer" style="background-color:#f2f2f6;">
                    <el-form-item label="订单编号" style="width: 350px;">
                        <el-input v-model="OrderType.id" placeholder="订单编号" maxlength="10" />
                    </el-form-item>
                    <el-form-item label="房型(房号)" style="width: 350px;">
                        <el-input v-model="OrderType.roomCode" placeholder="房号" />
                    </el-form-item>
                    <el-form-item label="房客姓名" style="width: 350px;">
                        <el-input v-model="OrderType.bookName" placeholder="房客姓名" />
                    </el-form-item>
                    <el-form-item label="手机号码" style="width: 350px;">
                        <el-input v-model="OrderType.bookPhone" placeholder="手机号码" />
                    </el-form-item>
                    <el-form-item label="入住时间">
                        <el-date-picker v-model="OrderType.rzTime" type="rzTime" placeholder="选择入住时间" clearable />
                    </el-form-item>
                    <el-form-item label="离店时间">
                        <el-date-picker v-model="OrderType.ldTime" type="ldTime" placeholder="选择离店时间" clearable />
                    </el-form-item>
                    <el-form-item label="金额" style="width: 350px;">
                        <el-input v-model="OrderType.money" placeholder="金额" />
                    </el-form-item>
                    <el-button type="primary" @click="OrderAdd()">添加</el-button>
                </div>
            </template>
        </el-dialog>
    </div>

</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import { Search } from '@element-plus/icons-vue'
import type { UploadInstance } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'

import moment from 'moment'
const form = reactive({
    RoomName: '',
});
const value3 = ref('')
const value2 = ref('')
//钩子函数
onMounted(() => {
    ordertpyelist();
})
//显示房型信息
const tableData = ref([])
const ordertpyelist = () => {
    axios.get('http://120.26.135.179:8033/api/Orderinfo', {
        params: {
            bookName: OrderType.bookName
        }
    })
        .then(res => {
            tableData.value = res.data.data;
        })
}

const RoomTypegetlist = () => {

}
const formatDate = (row: any, column: any, cellValue: any, index: any) => {
    return moment(cellValue).format('YYYY-MM-DD');
}


const AddorderTypeDialog = ref(false);
//新增房型
const OrderType = reactive({

    id: 0,
    roomCode: '',
    bookName: '',
    bookPhone: '',
    rzTime: '',
    ldTime: '',
    money: '',
    scrice: true

})
const AddorderTypes = () => {
    AddorderTypeDialog.value = true;
}
const OrderAdd = () => {
    axios.post('http://120.26.135.179:8033/api/OrderAdd', OrderType).then(res => {
        if (res.data.code == 0) {
            ElMessage.success(res.data.message);
        }
        else {
            ElMessage.error(res.data.message);
        }
    })
}
const value1 = ref(true);
const formInline = reactive({
    user: '',
    region: '',
    date: '',
    bookName: ''
})
const handleEdit = (row: any) => {

}
const handleDelete = (row: any) => {

}


</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>


<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>